<template>
  <page-meta :page-style="themeColor"></page-meta>

  <view>
    <view class="u-flex-col u-col-center login_bg">
      <u-avatar size="132" :src="avatarUrl"></u-avatar>
      <button class="avatar-wrapper color_new5 bgc_main" :hair-line="false" size="mini" open-type="chooseAvatar"
        @chooseavatar="onChooseAvatar">
        点击上传
      </button>
      <view class="login_form">
        <u-form :model="form" ref="uForm">
          <u-form-item label-position="top"   prop="phone" required label="电话">
            <input  class="inputStyle" v-model="form.phone" placeholder="请输入您的电话" />
          </u-form-item>
          <u-form-item label-position="top"  prop="name" required label="姓名">
            <input class="inputStyle" v-model="form.name" placeholder="请输入您的姓名"/>
          </u-form-item>
        </u-form>
      </view>
    </view>
    <view class="end_b">
      <button @click="submit" :custom-style="inputStyleNew" class="complete_btn" :hair-line="false" size="mini">
        完成
      </button>
    </view>
  </view>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      avatarUrl: '',
      // action: `${env.agentUrl}/upload/oss`,
      action: `/upload/oss`,
      customStyle: {
        background: '#3070F6',
        color: '#fff',
        borderRadius: '40rpx'
      },
      inputStyle: {
        padding: "18rpx 30rpx !important",
        background: "#fff !important",
        borderRadius: "20rpx !important"
      },
      inputStyleNew: {
        background: '#3070F6',
        color: '#fff',
        borderRadius: '40rpx',
        width: '100%',
        height: '70rpx',
        fontSize: '28rpx'
      },
      form: {
        phone: '',
        name: ''
      },
    }
  },
  onReady() {
  },
  methods: {
    submit() {
      savePartNerInfo({
        token: uni.getStorageSync("user_info").token,
        avatar: this.avatarUrl,
        mobile: this.form.phone,
        nickname: this.form.name
      }).then(res => {
        console.log(res, 'res');
        return
        uni.navigateTo({
          url: "/pages/carryInfo/carryInfo"
        })
      })


    },
    onChooseAvatar(e) {
      const avatarUrl = e.detail.avatarUrl
      const _this = this
      console.log(e);
      uni.uploadFile({
        filePath: avatarUrl,
        name: "file",
        url: _this.action,
        success(res) {
          console.log(res);
          const {
            data
          } = JSON.parse(res.data)
          _this.avatarUrl = data.url
        },
        fail(err) {
        }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.login_bg {
  padding-top: 200rpx;

  .avatar-wrapper {
    background: #3070F6;
    color: #fff !important;
    border-radius: 40rpx;
    height: 50rpx;
    margin-top: 10rpx;
    line-height: 50rpx;
    margin-top: 10rpx !important;
  }

  .login_form {
    width: 100%;
    padding: 50rpx 40rpx;

    .authorize_btn {
      border-radius: 20rpx;
      text-align: center;
      width: 60%;
      margin: 0 auto;
      color: #fff;
      padding: 24rpx 0rpx;
    }

    .inputStyle {
      padding: 18rpx 30rpx !important;
      background: #fff !important;
      border-radius: 20rpx !important;
    }
  }

  .xieyi {
    color: #3070F6;
  }
}

.end_b {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  height: 180rpx;
  background-color: #fff;
  padding: 30rpx 20rpx;

  .complete_btn {
    width: 100%;
    background: #3070F6;
    color: #fff;
    border-radius: 40rpx;
    width: 100%;
    height: 70rpx;
    font-size: 28rpx;
    line-height: 70rpx;
  }
}
</style>